<template>
  <!---------- 表格顶部操作区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格数据区域 ----------->
  <TableTreeTemplate :columns="columns" ref="tableRef" />

  <!-- 模块添加表单，等待moduleTreeData加载完毕,dataReload 刷新数据,由子组件触发 -->
  <ModuleAdd v-if="isTreeDataLoaded" ref="addRef" @dataReload="getTableData" />

  <!-- 模块修改表单，等待moduleTreeData加载完毕,dataReload 刷新数据,由子组件触发 -->
  <ModuleEdit v-if="isTreeDataLoaded" ref="editRef" @dataReload="getTableData" />
</template>
<script setup lang="ts">
  import { ref, onMounted, useTemplateRef } from 'vue';
  import ToolbarTemplate, { type ToolbarItem } from '@/components/template/button/toolbar-template.vue'; // 操作区模版
  import TableTreeTemplate from '@/components/template/table/table-tree-template.vue'; //表格树模版

  import ModuleAdd from '@/views/module/module_add.vue'; //模块添加页
  import ModuleEdit from '@/views/module/module_edit.vue'; //模块添加页
  import { type CustomTableColumnType } from '@/types/table'; //扩展 TableColumnType 定义

  const isTreeDataLoaded = ref(false); //树形数据加载完成标识
  const moduleTreeData = ref<any[]>([]); //模块树形数据,用于添加、修改页面的上级模块选择

  /* [数据处理] 树形数据处理 只保留一、二级节点，但标题显示"一级->二级" */
  function processTreeData(sourceData: any[]) {
    const rootModule = {
      // 创建根模块（作为独立的一级节点）
      id: 0, // 根模块ID，可自定义
      title: '根模块(顶级模块)', // 显示名称
      label: '根模块(顶级模块)', // 搜索用名称
      value: 0,
      children: null, // 根模块没有子节点
    };
    const originalFirstLevels = (sourceData || []).map((level1) => {
      //处理原有一级模块
      const level1Node = {
        //一级节点显示自身名称
        title: level1.module_name,
        label: level1.module_name,
        value: level1.module_id,
        id: level1.module_id,
        children: [],
      };
      if (level1.children && level1.children.length) {
        //处理二级节点，显示"一级->二级"
        level1Node.children = level1.children.map((level2: any) => ({
          title: `${level1.module_name}->${level2.module_name}`,
          label: level2.module_name,
          value: level2.module_id,
          id: level2.module_id,
          children: null, // 隐藏三级节点
        }));
      }
      return level1Node;
    });
    return [rootModule, ...originalFirstLevels]; // 组合根模块和原有一级模块（平级）
  }

  /* [显示弹窗] 1.将数值转化成数组 2.调用子组件显示添加窗体 */
  const onAdd = () => {
    const safeTreeData = Array.isArray(moduleTreeData.value) ? moduleTreeData.value : [];
    addInstance.value?.show(safeTreeData); //调用子组件 显示 弹窗方法
  };
  const addInstance = useTemplateRef('addRef'); //模块添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.传入要修改的ID,2.将数值转化成数组 3.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    const safeTreeData = Array.isArray(moduleTreeData.value) ? moduleTreeData.value : [];
    editInstance.value?.show(id, safeTreeData); //调用子组件 显示 弹窗方法
  };
  const editInstance = useTemplateRef('editRef'); //模块修改模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [获取表格数据] 1.调用 table-tree-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => {
    const menuTreeData = await tableInstance.value?.getTableData(listAction, listParams, true);
    moduleTreeData.value = processTreeData(menuTreeData);
    isTreeDataLoaded.value = true;
  };
  const tableInstance = useTemplateRef('tableRef'); //table-tree-template组件引用，用于执行组件内部方法
  const listAction = 'base.manage.module.ServiceImpl.listTreeByModuleType'; //list 接口 方法名
  const listParams = { module_type: 2, module_level_type: 3 }; //list 接口 参数,2:所有级别，3:总后台模块

  onMounted(() => {
    getTableData();
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig: ToolbarItem[] = [
    {
      text: '新建',
      type: 'primary',
      icon: 'add',
      permission: 'module_add',
      onClick: onAdd,
    },
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [
    {
      title: '菜单名称',
      fixed: 'left',
      dataIndex: 'module_name',
      width: 180,
    },
    {
      title: '类型',
      dataIndex: 'module_level_type',
      options: { 1: '模块', 2: '菜单', 3: '按钮' }, //扩展 TableColumnType 字段，用于枚举类型映射文本值
    },
    {
      title: '图标',
      dataIndex: 'module_icon',
      width: 280,
    },
    {
      title: '路由',
      dataIndex: 'module_link',
      width: 250,
    },
    {
      title: '接口方法',
      dataIndex: 'module_method_name',
      width: 250,
    },
    {
      title: '排序',
      dataIndex: 'module_sort',
    },
    {
      title: '操作',
      dataIndex: 'action',
      buttons: [
        {
          children: () => '修改',
          type: 'link',
          permission: 'module_edit',
          onClick: (record) => onEdit(record.module_id),
        },
        {
          children: () => '删除',
          type: 'link',
          permission: 'module_delete',
          onClick: (record) => onEdit(record.module_id),
        },
      ],
    },
  ];
</script>
<style lang="less" scoped></style>
